<!--
 * @Author: zjf
 * @Date: 2023-12-04 17:14:51
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-04 18:03:07
 * @Description:
-->
<template>
  <l-panel style="padding-bottom:0;">
    <l-query v-if="!loading" :span="7" :labelWidth="150" :height.sync="queryHeight" :items="queryItems"
      :formData="queryData" :loading="tableLoading" @search="changeCb">
      <template v-for="(val, index) in queryItems" #[val.prop]>
        <div :key="val.prop">
          <l-select v-if="val.dataType === 'dataItem' && options[val.dataCode]" :options="options[val.dataCode]"
            v-model="queryData[val.prop]" @change="changeCb" />
          <l-date-range v-else-if="val.dataType === 'datetime'" v-model="queryData[val.prop + 'QRange']"
            dateType="daterange" @change="changeCb"></l-date-range>
          <l-select v-else-if="val.dataType === 'boolean'" v-model="queryData[val.prop]"
            :options='[{ label: "是", value: true }, { label: "否", value: false }]' @change="changeCb"></l-select>
          <l-number-range v-else-if="val.append" v-model="queryData[val.prop + 'QRange']"></l-number-range>
          <el-input v-else v-model="queryData[val.prop]" :placeholder="$t('请输入')" @change="changeCb" />
        </div>
      </template>
    </l-query>
  </l-panel>
</template>
<script>
export default {
  name: 'fill-options',
  components: {
  },
  props: {
    queryItems: {
      type: Array,
      required: true
    },
    queryData: {
      type: Object,
      required: true
    },
    tableLoading: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      options: {},
      loading: true,
      queryHeight: 40
    };
  },
  computed: {

  },
  mounted() {
    // setTimeout(() => {

    this.init()
    // }, 2000);
  },
  methods: {
    changeCb() {
      this.$emit("change")
    },
    init() {
      // 获取数据字典
      this.queryItems.forEach((t) => {
        if (t.dataType == 'dataItem') {
          if (!this.options[t.dataCode]) {
            this.lr_loadDataItem(t.dataCode)
            this.loadOptions(t.dataCode)
          }
        }
      })
      this.loading = false
    },

    loadOptions(dataCode) {
      if (this.lr_dataItem[dataCode]) {
        this.options[dataCode] = this.lr_dataItemOptions(this.lr_dataItem[dataCode])
      } else {
        setTimeout(() => {
          this.loadOptions(dataCode)
        }, 800)
      }

    },
  },
  watch: {
    queryHeight(val, oldVal) {
      this.$emit("changeHeight", val)
    }
  }
}
</script>
<style lang="scss" scoped></style>